<!--  -->
<template>
<div class='user-page' :style="{ '--color': `${themeColor}` }">
  <c-title :hide="false" :text="'汇付支付'"></c-title>
  <div class="account-form" >
    <div class="account-head flex">
      <div class="steps-start steps-active flex">
        <div class="start-circle flex-a-c flex-j-c">1</div>
        <h3>开户</h3>
      </div>
      <p class="account-line"></p>
      <div class="steps-end flex" :class="withdrawInfo.id?'steps-active':''">
        <div class="start-circle flex-a-c flex-j-c">2</div>
        <h3>结算信息审核</h3>
      </div>
    </div>

    <div class="account-succeed" v-if="withdrawInfo.id && btnStatus == 1">
      <van-radio-group v-model="succeedRadio" direction="horizontal">
        <van-radio name="1" checked-color="var(--themeBaseColor)">开户成功</van-radio>
      </van-radio-group>
    </div>
    <div class="form-content" >
      <van-form  validate-first @submit="accountSubmit" >
        <van-cell-group>
          <van-field
            name="type" label-class="account-label" label="证件类型" >
          <template #input>
            <van-radio-group v-model="userForm.type" direction="horizontal">
              <van-radio name="1" checked-color="var(--themeBaseColor)" v-if="btnStatus != 1"></van-radio>个人
            </van-radio-group>
          </template>
          </van-field>
          <van-field 
            label="个人证件类型" 
            @click="cardTypeOn('type')"  
            label-class="account-label" 
            required 
            placeholder="请选择"
            v-model="cardTypeName"
            :class="btnStatus == 1?'input-color':''"
            :rules="[{ required: true, message: '请选择个人证件类型' }]"
            :disabled="withdrawInfo.id?true:false" 
            readonly>
            <template #right-icon v-if="btnStatus == 0">
              <span class="iconfont icon-icon_more11"></span>
            </template>
          </van-field>
          <van-field 
            label="个人证件号码" 
            label-class="account-label" 
            placeholder="请输入个人证件号码" 
            required
            name="id_card_no"
            :class="btnStatus == 1?'input-color':''"
            :disabled="withdrawInfo.id?true:false" 
            v-model="userForm.id_card_no" 
            :rules="[{ required: true, message: '' }]"/>
          <van-field 
            label="个人证件有效期类型" 
            @click="cardTypeOn('validType')" 
            label-class="account-label" 
            placeholder="请选择" 
            required
            name="id_card_valid_type"   
            v-model="cardValidName"
            :rules="[{ required: true, message: '请选择个人证件有效期类型' }]"
             
            readonly>
            <template #right-icon v-if="btnStatus != 1">
              <span class="iconfont icon-icon_more11"></span>
            </template>
          </van-field>
          <van-field 
            label="个人证件有效期开始日期" 
            @click="cardStartTime('start')" 
            label-class="account-label" 
            placeholder="请选择" 
            required  
            v-model="userForm.id_card_valid_start_time"
            :rules="[{ required: true, message: '请选择个人证件有效期开始日期' }]"
 
            readonly>
            <template #right-icon v-if="btnStatus != 1">
              <span class="iconfont icon-icon_more11"></span>
            </template>
          </van-field>
          <van-field 
            label="个人证件有效期截止日期" 
            @click="cardStartTime('end')" 
            label-class="account-label" 
            placeholder="请选择" 
            required 
            v-if="(userForm.id_card_valid_type != 1 || userForm.id_card_type != 17)"
            v-model="userForm.id_card_valid_end_time" 
            readonly
            :rules="[{ required: true, message: '请选择个人证件有效期截止日期' }]" >
            <template #right-icon v-if="btnStatus != 1">
              <span class="iconfont icon-icon_more11"></span>
            </template>
          </van-field>
          <van-field 
            label="个人姓名" 
            label-class="account-label" 
            placeholder="请输入个人姓名" 
            required 
            v-model="userForm.name"
            :disabled="withdrawInfo.id?true:false"
            :class="btnStatus == 1?'input-color':''" 
            :rules="[{ required: true, message: '' }]">
          </van-field>
          <van-field 
            label="手机号" 
            label-class="account-label" 
            placeholder="请输入手机号"
            :disabled="withdrawInfo.id && btnStatus == 1?true:false"  
            required v-model="userForm.mobile"
            :clearable="btnStatus != 1?true:false"
            :class="btnStatus == 1?'input-color':''"
            :rules="[{ required: true, message: '' }]">
          </van-field>
        </van-cell-group>
        <div  class="account-btn"  :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
          <template v-if="btnStatus == 1">
            <div class="flex-a-c flex-j-sb" v-if="withdrawInfo.id">
              <van-button round block type="info" plain  native-type="button" @click.stop="windEdit" style="width:6.625rem;" color="var(--themeBaseColor)" >重新提交</van-button>
              <van-button round block type="info" native-type="button" @click.stop="windAccountTo" style="width: 14.375rem;" color="var(--themeBaseColor)">下一步</van-button>
            </div>
          </template>
          <template v-else>
            <van-button round block type="info" native-type="submit" color="var(--themeBaseColor)" >提交</van-button>
          </template>
          
        </div>
      </van-form>
      
    </div>
    
    <div class="mb-64"></div>
      <card-popup 
        :cardArr="cardArr" 
        :cardTitle="cardTitle"
        :cardIndex="cardIndex" 
        :cardTypeShow.sync="cardTypeShow"
        @cardConfrim="cardConfrim">
      </card-popup>
      
      <van-popup v-model="dateShow" position="bottom" :style="{ height: '50%' }" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :title="cardTimeType == 'start'?'证件有效期开始日期':'证件有效期截止日期'"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="dateCancel"
          @confirm="dateConfirm"
          :formatter="formatter"
        />
      </van-popup>
  </div>
</div>
</template>

<script>
import userAccount_controller from "./userAccount_controller.js";
export default userAccount_controller;
</script>
<style lang="scss" scoped>
 ::v-deep .van-radio-group--horizontal {
    width:100%;
  }
  ::v-deep .van-cell__value .van-radio {
    display:flex;
  }
  ::v-deep .account-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
  }
  .account-succeed ::v-deep .van-radio__label {
    color:var(--themeBaseColor);
  }
  .form-content ::v-deep .van-cell {
    padding: 0.9375rem 1rem;
  }
  .wind-form ::v-deep .account-field {
    flex-direction: column;
  }
  .form-content ::v-deep .van-cell:last-child {
    border-radius:  0 0 0.5rem 0.5rem;
  }
  .form-content ::v-deep .van-cell:first-child {
    border-radius:  0.5rem 0.5rem 0 0 ;
  }
  .form-content ::v-deep .van-cell-group {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  .input-color ::v-deep .van-field__control:disabled  {
    font-size: 0.875rem;
    color: #00001C;
    -webkit-text-fill-color:#00001C;
  }
  .mb-64 {
    height: 8rem;
    clear: both;
  }
  .account-succeed {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding:0.9375rem 0.75rem;
    margin:0.625rem 0 0 0;
  }
  /* @import url(); 引入公共css类 */
  .start-circle {
    width: 1.25rem;
    height: 1.25rem;
    background: #E2E2E5;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.75rem;
    color: #6E6E79;
  }
  .account-form {
    margin: 0.75rem 0.75rem 0 0.75rem;
    .account-head {
      padding:0 0.75rem 0.375rem 0.75rem;
      .steps-start {
        
        h3 {
          padding: 0 0.8125rem 0 0.375rem;
          font-weight: 400;
          font-size: 0.875rem;
          color: #6E6E79;
        }
      }
      .steps-end {
        padding:0 0 0 0.9375rem;
        h3 {
          padding: 0 0rem 0 0.375rem;
          font-weight: 400;
          font-size: 0.875rem;
          color: #6E6E79;
        }
      }
      .account-line {
        // border-style: dashed;
        flex:2;
        position: relative;
        transform: translate(0 ,-50%);
        border-bottom: 0.0625rem dashed #AAAAB3;
      }
      .steps-active {
        .start-circle {
          background: #3B3B4A;
          color:#fff;
        }
        h3 {
          color: #00001C;
        }
      }
    }
    .form-content {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      margin:0.625rem 0 0 0;
    }
  }
  .account-btn {
    width:100%;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    padding:0.625rem 0.75rem;
  }
  
</style>